<template>
	<view class="">
		<view style="width:100%;" class="acupoint">
			<view class="acupointIns">
				<!-- 左侧图片 -->
				<view class="imgs">
					<image v-if="list[flag].imgUrl.length < 2" :src="list[flag].imgUrl[0].url" mode=""></image>
					<image v-if="list[flag].imgUrl.length > 1 && !pnFlag" :src="list[flag].imgUrl[0].url" mode="">
					</image>
					<image v-if="list[flag].imgUrl.length > 1 && pnFlag" :src="list[flag].imgUrl[1].url" mode="">
					</image> 
				</view>
				<!-- 正反背面 -->
				<view class="ulsStyle" v-if="list[flag].imgUrl.length > 1">
					<view v-for="(item, index) in pnList" :id="pnFlag == index?'lisWidth':''"
						:key="index"
						:class="pnFlag == index ? 'colors' : 'color'" class="lis" @click="clickLI('pn',index)">
						{{item.name}}
					</view>
					<view class="lisStyle li2" :style="`height:${pnWidth}px;transform:translateY(${pnOffsetW}rpx);`">
					</view>
				</view>
			</view>
			<!-- 右侧按钮 -->
			<view class="ulStyle">
				<view v-for="(item, index) in list" :id="flag == index?'liWidth':''"
					:class="flag == index ? 'colors' : 'color'" :key="index" class="lis" @click="clickLI('zn',index)">{{item.name}}
				</view>
				<view class="liStyle li2" :style="`height:${width}px;transform:translateY(${offsetW}px);`"></view>
			</view>
		</view>
		<!-- 解析图解文案 -->
		<view class="bottom"  @touchstart="fingerstart" @touchend="fingerend" :class="specClass">
			<view class="bottomIn">
				<view class="bottomName">
					{{list[flag].name}}
				</view>
				<view class="bottomText" v-for="(item, index) in list[flag].fontText" :key="index">
					<view class="bottomIcon"></view><text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '@/pages/town/common/command.js';
	export default {
		data() {
			return {
				width: '',
				offsetW: '',
				pnWidth: '',
				pnOffsetW: '',
				startData: {
					clientY: 0
				},
				specClass: 'hide', //底部是否显示
				flag: 0, //右侧选项下标
				pnFlag: 0, //正反两面下标
				pnType: true, //正反是否显示
				pnList: [{
						name: '正面'
					},
					{
						name: '背面'
					}
				],
				list: list,
			};
		},
		watch: {

		},
		computed: {

		},
		mounted() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#liWidth').boundingClientRect(data => {
					this.width = data.height
					this.offsetW = data.top
				}).exec();
				if (this.pnType) {
					if (this.pnFlag) {
						this.pnOffsetW = 100
					} else {
						this.pnOffsetW = 20
					}
				}
			})
		},
		methods: {
			/**
			 * 点击滑动效果
			 * 
			 * @param {String} type	是右侧按钮 还是左侧按钮点击
			 * @param {Number} id	下标
			 */
			clickLI(type, id) {
				let ids;
				if (type == 'zn') {
					this.flag = id
					ids = '#liWidth'
				} else {
					this.pnFlag = id
					ids = '#lisWidth'
				}
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#liWidth').boundingClientRect(data => {
						this.width = data.height
						this.offsetW = data.top
					}).exec();
					if (this.pnType) {
						if (this.pnFlag) {
							this.pnOffsetW = 100
						} else {
							this.pnOffsetW = 20
						}
					} else {
						this.pnFlag = 0
					}
				})
				this.$forceUpdate()
			},
			/**
			 * 上滑动
			 * 
			 * @param {Object} item
			 */
			fingerstart(item) {
				this.startData.clientY = item.changedTouches[0].clientY;
			},
			/**
			 * 下滑动
			 * 
			 * @param {Object} item 
			 */
			fingerend(item) {
				const subY = item.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					if (subY > 50) {
						this.specClass = 'show';
					} else if (subY < -50) {
						this.specClass = 'hide';
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bottom {
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 3;

		.bottomIn {
			margin: 40rpx 32rpx 80rpx;

			.bottomName {
				font-size: 34rpx;
				font-weight: 700;
				color: #272D38;
				margin-bottom: 24rpx;
			}

			.bottomText {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.bottomIcon {
					width: 8rpx;
					height: 16rpx;
					background: #00ACFF;
					border-radius: 4rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 26rpx;
					font-weight: 400;
					color: #272D38;
				}
			}
		}

	}

	.acupointIns {
		position: relative;
	}

	.acupoint {
		display: flex;
		justify-content: center;
		padding-top: 150rpx;
	}

	.imgs {
		// position: relative;

		image {
			width: 480rpx;
			height: 1000rpx;
		}
	}

	.ulStyle {
		width: 20%;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;

		.liWidth {
			/* padding: 10px; */
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			overflow: hidden;
		}

		.lis {
			position: relative;
			z-index: 2;
			width: 150rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}

	.ulsStyle {
		width: 20%;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		position: absolute;
		bottom: 0rpx;

		.lisWidth {
			/* padding: 10px; */
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			overflow: hidden;
		}

		.lis {
			position: relative;
			z-index: 2;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}

	.color {
		transition: all .5s .1s;
		color: #c2c4c7 !important;
	}

	.colors {
		transition: all .5s .1s;
		color: #FFFFFF !important;
	}

	.li2 {
		transition-duration: 0.5s;
	}

	.liStyle {
		list-style: none;
		height: 6rpx;
		background: #00ACFF;
		position: absolute;
		z-index: 1;
		top: 0;
		width: 150rpx;
		height: 80rpx;
		border-radius: 15rpx;
	}

	.lisStyle {
		list-style: none;
		height: 6rpx;
		background: #00ACFF;
		position: absolute;
		z-index: 1;
		top: 0;
		width: 96rpx;
		height: 80rpx;
		border-radius: 15rpx;
	}

	.li2 {
		transition-duration: 0.5s;
	}

	.show {
		animation: showLayer 0.2s;
		animation-fill-mode: forwards;
	}

	.hide {
		animation: hideLayer 0.2s;
		animation-fill-mode: forwards;
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0%);
		}

		100% {
			transform: translateY(160rpx); 
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(160rpx);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>
